<template>
  <div class="fixed-header" :style="style">
    <div v-show="!hideTap" class="horizontal-header">
      <div class="horizontal-header-left">
        <img src="/111.png" alt="logo" />
        <span>{{ setting.getTitle }}</span>
      </div>
      <el-menu
        ref="menuRef"
        mode="horizontal"
        class="horizontal-header-menu"
        :default-active="defaultActive.id"
      >
        <Item v-for="m in menu.menus" :key="m.id" :item="m" />
      </el-menu>
      <SettingNav />
    </div>
    <Tags />
  </div>
</template>
<script setup lang="ts">
import SettingNav from "../nav/settingNav.vue";
import Item from "../item/item.vue";
import { ref, nextTick } from "vue";
import Tags from "../tag/index.vue";
import { useMenuHooks } from "@/core/pinia/store/menu.store";
import { useSettingHooks } from "@/core/pinia/store/setting.store";
import { useAppHooks } from "@/core/pinia/store/app.store";
import { computed } from "vue";
const app = useAppHooks();
const menu = useMenuHooks();
const setting = useSettingHooks();
const menuRef = ref();
const defaultActive = computed(() => {
  return menu.getDefaultActive;
});
/** 计算当前包括框的样式 */
const style = computed(() => {
  return app.getPages?.hideTabs && app.isHorizontal
    ? app.getTheme?.darkMode
      ? { "box-shadow": "0 1px 4px #0d0d0d" }
      : { "box-shadow": "0 1px 4px rgba(0, 21, 41, 0.08)" }
    : {};
});
const hideTap = computed(() => {
  return app.getHiddenTabs;
});
nextTick(() => {
  menuRef.value?.handleResize();
});
</script>

<style lang="scss" scoped>
:deep(.el-loading-mask) {
  opacity: 0.45;
}

.logout {
  max-width: 120px;

  ::v-deep(.el-dropdown-menu__item) {
    display: inline-flex;
    flex-wrap: wrap;
    min-width: 100%;
  }
}
</style>
